<template>
	<view>
		<u-navbar :background="background" :borderBottom="false">
			<view class="ft_16 fw-b">
				提现
			</view>
		</u-navbar>
		<view class="content">
			<view class="con_1">
				<view class="p_bottom_10 c-666">
					当月可提现收入（元）
				</view>
				<view class="ft_32 fw-b">
					{{total}}
				</view>
			</view>
			<view class="con_2">
				<view class="input">
					<u-input type="number" v-model="TXprice" placeholder="每月自动打款提现" disabled/>
				</view>
				<!-- <view class="display p_top_10 ft_12 c-999" style="justify-content: flex-end;">
					<view class="" style="color: #ea8a20;" @click="allTX">
						全部提现
					</view>
				</view> -->
			</view>
			
			<view class="con_3">
				<view class="ft_16 fw-b p_bottom_10">
					提现方式
				</view>
				<view class="pay_type">
					<view class="confirmBtn ft_16" @click="addCard()" v-if="!bankcard" style="border-radius: 10px;">
						添加银行卡
					</view>
					<u-radio-group v-model="value" v-else>
						<view class="" v-for="(item, index) in payList" :key="index" style="padding: 5px 0;">
							<view class="display type just_space">
								<view class="display juzhong" >
									<image :src="item.img"></image>
									<view class="p_left_10">{{item.type}}</view>
								</view>
								<!-- <u-radio @change="radioChange" :name="item.name" active-color="#ec9520"></u-radio> -->
							</view>
							<!-- 银行卡信息 -->
							<view class="display just_space alipay" v-if="value==1&&item.name==1">
								<view class="">开户行</view>
								<u-input type="text" input-align="right" v-model="bankcard.bank_deposit" placeholder="请输入开户行" disabled/>
							</view>
							<view class="display just_space alipay" v-if="value==1&&item.name==1">
								<view class="">银行卡号</view>
								<u-input type="number" input-align="right" v-model="bankcard.bank_card" placeholder="请输入银行卡号" disabled/>
							</view>
							<view class="display just_space alipay" v-if="value==1&&item.name==1">
								<view class="">持卡人姓名</view>
								<u-input type="text" input-align="right" v-model="bankcard.username" placeholder="请输入真实姓名" disabled/>
							</view>
							<view class="display just_space alipay" v-if="value==1&&item.name==1">
								<view class="">银行预留手机号</view>
								<u-input type="number" input-align="right" v-model="bankcard.mobile" placeholder="请输入预留手机号" maxlength="11" disabled/>
							</view>
							
							<view class="p_top_10 ft_12 c-yellow" style="text-align: right;" @click="addCard()">
								(修改银行卡信息)
							</view>
						</view>
					</u-radio-group>
					<view class="display just_space alipay" v-if="value==3">
						<view class="">
							支付宝账号
						</view>
						<view class="">
							<u-input type="number" input-align="right" v-model="alipayNum" placeholder="请输入支付宝手机号" maxlength="11"/>
						</view>
					</view>
				</view>
			</view>
		<!-- 	<view class="confirmBtn ft_16" @click="tixian" v-if="bankcard">
				提现
			</view> -->
			
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{backgroundColor: '#ffffff',},
				
				total:"",//可提现金额
				TXprice:"",//提现金额
				shouxu:"", //手续费比率
				
				payList:[ //提现到
					{
						img:"../../../../static/order/pay/yinhangka.png",
						name:1,
						type:"银行卡"
					},
					// {
					// 	img:"/static/order/pay/weixin.png",
					// 	name:2,
					// 	type:"微信余额"
					// },
					// {
					// 	img:"/static/order/pay/zhifubao.png",
					// 	name:3,	
					// 	type:"支付宝"
					// },
				],
				alipayNum:"", //支付宝账号
				value:1, //默认提现到
				
				bankcard:{}, //银行卡信息
				
			}
		},
		onLoad() {
			this.getInfo() //获取提现信息
			uni.$on('getInfo',res=>{
				this.getInfo() //获取提现信息
			})
		},
		methods: {
			getInfo(){ //获取提现信息
				this.$myRequest('user/bankcard',{})
				.then(res=>{
					console.log(res.data);
					let data=res.data.data
					this.bankcard=data.bankcard
					this.total=data.money
					// this.shouxu=data.procedures
				})
			},
			
			addCard(){ //去添加银行卡
				uni.navigateTo({
					url:"../../../../addCard"
				})
			},
			radioChange(e) { //选择提现到
				this.value=e
				if(e!=1){
					this.bankcard={}
				}
			},
			allTX(){ //全部提现
				console.log(this.total);
				if(this.total==0){
					this.$all.toast("无可提现金额")
				}else{
					this.TXprice=this.total
				}
			},
			tixian(){ //提现 提交
				let datainfo={
					price:this.TXprice,
					type:this.value,
					username:this.bankcard.username,
					mobile:this.bankcard.mobile,
					bank_card:this.bankcard.bank_card,
				}
				console.log(datainfo);
				if(!this.$all.changeBank(this.bankcard.mobile)) return
				this.$myRequest('user/withdrawal',datainfo)
				.then(res=>{
					console.log(res.data);
					this.$all.toast(res.data.msg)
					if(res.data.code==1){
						setTimeout(()=>{
							uni.navigateBack()
						},800)
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fafafa;
}
.content{
	padding: 10px 15px;
	.con_1{
		background-color: #FFFFFF;padding: 30px 0;text-align: center;border-radius: 5px;margin-bottom: 20px;
	}
	.con_2{
		margin-bottom: 30px;
		.input{
			background-color: #FFFFFF;border-radius: 5px;padding: 8px 15px;
		}
	}
	.con_3{
		.pay_type{
			background-color: #FFFFFF;
			padding: 15px 15px 0;
			.type{
				padding-bottom: 15px;
				justify-content: space-between;
				width: 325px;
				border-bottom: 1px solid #eeeeee;
				image{
					width: 20px;height: 20px;
				}
			}
			.alipay{
				border-bottom: 1px solid #eeeeee;
				padding: 10px 0;
			}
		}
	}
	.confirmBtn{
		margin: 50px 0;padding: 15px 0;background: linear-gradient(90deg, #F1A421 0%, #E4741F 100%);border-radius: 30px;text-align: center;color: #FFFFFF;
	}
	
}

</style>
